
<template>
  <div>
    <a-tag v-for="(item, index) in value" :color="item.color" closable @close="handleRemoveClick($event, index)" @click="handleEditClick(index)" style="margin-right:3px;">{{item.color}}</a-tag>
    <a-tag v-if="limit != -1 && limit > value.length" color="#596774" @click="handleAddClick">
      <a-icon type="plus" />
    </a-tag>
    <a-modal title="配色" :visible.sync="dialogVisible" width="300px" @cancel="dialogVisible=false" @ok="handleSaveClick">
      <j-color-picker v-model="color"/>
    </a-modal>
  </div>
</template>
<script>
  export default {
    name: 'customColor',
    model: {
      prop: "value",
      event: "input"
    },
    props: {
      value: Array,
      limit: Number
    },
    data() {
      return {
        dialogVisible: false,
        color: '',
        index: -1,
        flag: true // true 新增， false 编辑
      }
    },
    methods: {
      handleAddClick() {
        this.dialogVisible = true
        this.flag = true
        this.color = ''
      },
      handleRemoveClick(e, index) {
        e.preventDefault();
        this.value.splice(index, 1);
        this.$emit("input", this.value)
        this.$emit("change", this.value)
      },
      handleEditClick(index) {
        this.dialogVisible = true
        this.flag = false
        this.index = index
        this.color = this.value[this.index].color
      },
      handleSaveClick() {
        this.dialogVisible = false
        if(this.flag) {
          this.value.push({color: this.color})
        } else {
          this.value.splice(this.index, 1, {color: this.color})
        }
        this.$emit("input", this.value)
        this.$emit("change", this.value)
      }
    }
  };
</script>
